Menu
DOM操作
イベント
情報を受け取る
連続表示
一つにまとめる
配列の変更
多次元配列
querySelector
フォームから情報を取得
パスワード自動生成
DOM操作
Id:Class:コードの表示が可能
1 + 1 = ?
1 + 1 = ?
表示: 1 + 1 = ?
<p>1 + 1 = ?</p>
表示: 1 + 1 = 2
<p>1 + 1 = <span id="anser">?</span></p>
<script>
document.getElementById('anser').textContent = 1 + 1;
</script>
イベント
ボタンをクリックすると、画像が表示:非表示
画像を表示button
<button id="btn">画像を表示</button>
画像を非表示button
<button id="btn1">画像を比表示</button>
<img id="img" src="img/logo.png" alt="答え" style="display:none;">
画像を表示
<script>
document.getElementById('btn').addEventListener('click', function(){
document.getElementById('img').style.display = 'block';
});
</script>
画像を非表示
<script>
document.getElementById('btn1').addEventListener('click', function(){
document.getElementById('img').style.display = 'none';
});
</script>
ボタンを押すと音が鳴りサイコロを振って数字変化
サイコロの目は?
サイコロの目は?</span>
<button id="btn2">サイコロを振る</button>
<script>
document.getElementById('btn2').addEventListener('click', function(){
document.getElementById('dice').textContent = Math.floor(Math.random() * 6) + 1;
音が鳴る
const audio = new Audio('voise/voice.mp3');
audio.play();
});
</script>
precodeの枠の中でクリックすると音が鳴る
precodeより下に書かないと反応しない
<script>
document.getElementById('precode').addEventListener('click', function(){ // precodeの枠の中でクリックすると音が鳴る
if (!this.audio1) { // 連続再生キャンセル用
this.audio1 = new Audio('voise/voice.mp3'); //音が鳴る
this.audio1.addEventListener('ended', function(){ //音が終わったら
this.audio1.currentTime = 0; //音を最初に戻す
this.audio1.isPlaying = false; //音が終わったらfalse
}.bind(this)); //bind(this)を使うことで、thisを使えるようにする
}
if (!this.audio1.isPlaying) { //連続再生キャンセル用
this.audio1.play(); //音が鳴る
this.audio1.isPlaying = true; //音が鳴っている間はtrue
}
});
</script>
入力した内容を受け取る(form)
理屈を知るために、小さい計算機もどき作成
数字の掛け算
x = ?文字列の足し算
+ = ?
掛け算の計算
<div class="Calculator">
<p>数字の掛け算</p>
<input type ="number" id="num1"> x <input type ="number" id="num2"> = <span id="result">?</span>
</div>
文字列の足し算
<div class="Calculator">
<p>文字列の足し算</p>
<input type ="text" id="text1"> + <input type ="text" id="text2"> = <span id="result1">?</span>
</div>
ボタン
<div class="Calculator-div">
<button id="btn3">計算</button>
</div>
<script>
// 掛け算の計算
document.getElementById('btn3').addEventListener('click', function(){ // ボタンをクリックしたら
const num1 = document.getElementById('num1').value; // valueで入力した値を取得
const num2 = document.getElementById('num2').value; // valueで入力した値を取得
document.getElementById('result').textContent = Math.round(num1 * num2); // Math.round()で四捨五入
});
// 文字列の足し算
document.getElementById('btn3').addEventListener('click', function(){ // ボタンをクリックしたら
const text1 = document.getElementById('text1').value; // valueで入力した値を取得
const text2 = document.getElementById('text2').value; // valueで入力した値を取得
document.getElementById('result1').textContent = text1 + text2; // 文字列の足し算
});
</script>
テキストフィールドに入力がない場合に警告する+音が出る
名前の入力の例で確認
名前の入力の例で確認
<div class="Calculator">
<p>名前の入力の例で確認</p>
<input type ="text" id="num3" placeholder="名前を入力してください">
<button id="btn4">名前を表示</button>
</div>
<script>
document.getElementById('btn4').addEventListener('click', function(){ // ボタンをクリックしたら
const num3 = document.getElementById('num3').value; // valueで入力した値を取得
if (num3 === '') { // 入力がない場合
const audio = new Audio('voise/Who.aac'); // 音声ファイルを指定
audio.playbackRate = 1.5; // 再生速度を2倍にする
audio.play(); // 音が鳴る
alert('貴方は誰ですか？'); // 警告
} else { // 入力がある場合
const audio1 = new Audio('voise/Welcomehome.aac'); // 音声ファイルを指定
audio1.play(); // 音が鳴る
alert('おかえりなさいませ' + num3 + 'ご主人様'); // 名前を表示
}
});
</script>
論理演算子::[true=正][false=誤]
| 記号 | 説明 |
|---|---|
| A === B | 等しい |
| A < B | Aが大きい |
| A > B | Bが大き |
| A >= B | AがB以上、B含む |
| A <= B | AがB以下、A含む |
| A !== B | 等しくない |
| && | かつ(左:右:両方等しい時) |
| || | または(左:右:どちらか等しい時) |
| => | アロー関数 |
数字の入力(10以下の数字は警告される)条件を加えた
数字の入力(空文字or10以下の数字は警告される)条件を加えた
<div class="Calculator">
<p>数字の入力(10以下の数字は警告される)条件を加えた</p>
<input type ="text" id="num5" placeholder="数字入力してください">
<button id="btn5">数字を表示(10以下の数字は警告される)</button>
</div>
<script>
document.getElementById('btn5').addEventListener('click', function(){ // ボタンをクリックしたら
const num5 = document.getElementById('num5').value; // valueで入力した値を取得
if (num5 === '' || num5 <= 10) { // 入力がない場合
alert('10以上の数字を加えてください'); // 警告
} else { // 入力がある場合
alert('貴方の幸福度は' + num5 + '位です'); // 表示
}
});
</script>
数字を連続で表示(for文)
<script>
for (let i = 1; i <= 10; i++) { for(初期化処理; 条件式; 更新処理)
document.write(i + '回目<br>'); 繰り返し処理
}
</script>
数字を連続で表示(while文)
繰り返す回数がわかってる場合便利
<script>
let i = 1; let i = 1; 初期化処理
while (i <= 15) { while(条件式)
document.write(i + '回目<br>'); 繰り返し処理
i++; 更新処理
}
</script>
応用でサイコロが20出るまで続く
ページのリロードで変化
<script>
let a = 0;
while (a !== 20) { while(条件式)
a = Math.floor(Math.random() * 20); 繰り返し処理
document.write(a + '回目<br>');
a++; 更新処理
}
</script>
do while文
<script>
let c = 0;
do {
c = Math.floor(Math.random() * 10) ;
document.write('サイコロ振った回数は' + c + '個目<br>');
c++;
} while (c !== 10);
</script>
break文(強制終了)
<script>
for (let d = 0; d < 100; d++) { // 100回繰り返す
d = Math.floor(Math.random() * 100)+1 ; // 100までの数字
document.write('サイコロ振った回数は' + d + '個目<br>');
if (d === 1) { // 1になったら
break; // 終了
}
}
</script>
continue文(スキップ)
continue条件になった時の条件を無視して最初に戻る
<script>
for (let e = 0; e < 10; e++) { // 10回繰り返す
e = Math.floor(Math.random() * 10)+1 ; // 10までの数字
if (e === 5) { // 5になったら
continue; // スキップ
}
document.write('サイコロ振った回数は' + e + '個目<br>');
}
</script>
1つにまとめる
配列いろんなやり方があるが、for Each文、お勧め
指定して表示[01234]
<script>
0 1 2 3 4
const fruits = ['りんご', 'バナナ', 'みかん', 'ぶどう', 'いちご'];
document.write(fruits[0] + '<br>'); // りんご
</script>
まとめて表示
<script>
0 1 2 3 4
const fruits1 = ['りんご', 'バナナ', 'みかん', 'ぶどう', 'いちご'];
for (let f = 0; f < fruits1.length; f++) { // fruits1の数だけ繰り返す
document.write(fruits1[f] + '<br>');
}
</script>
for of文
for (変数 of 配列) 繰り返したい処理
<script>
0 1 2 3 4
const fruits2 = ['りんご', 'バナナ', 'みかん', 'ぶどう', 'いちご'];
for (let g of fruits2) { // fruits2の数だけ繰り返す
document.write(g + '<br>'); // fruits2の中身を表示
}
</script>
for (変数 of 配列) 繰り返したい処理
for Each文=お勧め
配列.forEach(関数名)
<script>
0 1 2 3 4
const fruits3 = ['りんご', 'バナナ', 'みかん', 'ぶどう', 'いちご'];
fruits3.forEach(function(g) { // fruits3の数だけ繰り返す
document.write(g + '<br>'); // fruits3の中身を表示
});
</script>
配列.forEach(関数名)
連想配列
連想配列の中身を指定して表示[りんご]
<script>
const fruits55 = {
'apple': 'りんご',
'banana': 'バナナ',
'orange': 'みかん',
'grape': 'ぶどう',
'strawberry': 'いちご'
};
for (let z in fruits55) {
document.write(fruits55[z] + '<br>'); // fruits55の中身を表示
}
document.write(fruits55['apple'] + '<br>'); // りんご
</script>
中身全て表示
<script>
const fruits555 = {
'apple': 'りんご',
'banana': 'バナナ',
'orange': 'みかん',
'grape': 'ぶどう',
'strawberry': 'いちご'
};
for (let q in fruits555) {
document.write(fruits55[q] + '<br>'); // fruits55の中身を表示
}
</script>
key取得して表示
<script>
const fruits5555 = {
'apple': 'りんご', // key: value 'apple'
'banana': 'バナナ', // key: value 'banana
'orange': 'みかん', // key: value 'orange'
'grape': 'ぶどう', // key: value 'grape'
'strawberry': 'いちご' // key: value 'strawberry'
};
for (key in fruits5555) {
document.write(key + '<br>');
}
</script>
配列の変更
内容の追加
末尾に追加(.push)
<script>
const itemitem =['月', '火', '水', '木', '金', '土', '日'];
// 内容の追加
itemitem.push('月面'); // 末尾に追加
document.write(itemitem + '<br>');
</script>
内容の追加
先頭に追加(.unshift)
<script>
const itemitem1 =['月','火', '水', '木', '金', '土', '日'];
// 内容の追加
itemitem1.unshift('太陽'); // 先頭に追加
document.write(itemitem1 + '<br>');
</script>
内容の変更
指定した箇所を変更(月[0])
<script>
const itemitem2 =['月','火', '水', '木', '金', '土', '日'];
// 内容の変更
itemitem2[0] = ''; // 0番目を変更
document.write(itemitem2 + '<br>'); // 月が消える
</script>
内容の変更
内容の最初削除(shift)
<script>
const itemitem3 =['月','火', '水', '木', '金', '土', '日'];
// 内容の変更
itemitem3.shift(); // 最初を削除
document.write(itemitem3 + '<br>'); // 月が消える
</script>
内容の変更
内容の最後削除(pop)
<script>
const itemitem4 =['月','火', '水', '木', '金', '土', '日'];
// 内容の変更
itemitem4.pop(); // 最後を削除
document.write(itemitem4 + '<br>'); // 日が消える
</script>
内容の変更
指定した箇所を削除(.splice)(月[0])
<script>
0 1 2 3 4 5 6
const itemitem5 =['月','火', '水', '木', '金', '土', '日'];
// 内容の変更
itemitem5.splice(0, 1); // 0番目を削除
// 6番目削除する場合は、itemitem5.splice(6, 1);
document.write(itemitem5 + '<br>'); // 月が消える
</script>
コンソールログ
画面に、結果を表示していたは、確認が大変な時があるので、コンソール画面で確認[F12]
console.log('表示したい内容')
コードだけ記載確認しながら実践してみてくれ
<script>
console.clear(); // コンソールログを消す
console.log('私は天才だ'); // コンソールログ表示
console.error('エラーです'); // エラー表示
console.warn('警告です'); // 警告表示
console.time('タイマー'); // タイマー開始
console.timeEnd('タイマー'); // タイマー終了
</script>
多次元配列=複雑あまり使わないかもね!
<script>
const area = {
'hokkaido': ['札幌'],
'aomori': ['青森', '弘前'],
}
for (let key in area) {
document.write(key + '<br>');
for (let value of area[key]) {
document.write(value + '<br>');
}
}
</script>
querySelector
querySelectorは、HTMLの要素を取得
querySelectorAllは、HTMLの要素を全て取得
querySelector('要素名')で取得
querySelectorAll('要素名')で全て取得
querySelector('#id名')で取得
querySelectorAll('.class名')で全て取得
1 + 1 =?
<p>1 + 1 =<span id="spsp">?</span></p>
<script>
document.querySelector('.spsp').textContent = 1 + 1; // 1 + 1 = 2
</script>
フォームから情報を取得
<label>住まい</label>
<select id="pref" name="pref">
<option value="北海道">北海道</option>
<option value="青森">青森</option>
<option value="岩手">岩手</option>
</select>
<label>ご意見箱</label>
<textarea id="opinion" name="opinion"></textarea>
<div>
<button id="btn6">送信</button>
</div>
<script>
document.getElementById('btn6').addEventListener('click', function() {
const pref = document.getElementById('pref').value; // プルダウンの情報取得
const opinion = document.getElementById('opinion').value; // テキストエリアの情報取得
alert('住まいは' + pref + 'です。' + 'ご意見は' + opinion + 'です。');
});
</script>
チェックボックスの情報取得
<label>好きな果物を1つ選択:</label>
<label for="apple">りんご</label>
<input type="checkbox" id="apple" name="apple" value="りんご">
<label for="banana">バナナ</label>
<input type="checkbox" id="banana" name="banana" value="バナナ">
<label for="orange">みかん</label>
<input type="checkbox" id="orange" name="orange" value="みかん">
<div>
<button id="btn7">送信</button>
</div>
<script>
document.getElementById('btn7').addEventListener('click', function() {
const apple = document.getElementById('apple').checked; // チェックボックスの情報取得
const banana = document.getElementById('banana').checked; // チェックボックスの情報取得
const orange = document.getElementById('orange').checked; // チェックボックスの情報取得
// 一つだけ選択可能
if (apple === true && banana === false && orange === false) { // りんごだけ選択
alert('好きな果物は' + 'りんご' + 'です。');
} else if (apple === false && banana === true && orange === false) { // バナナだけ選択
alert('好きな果物は' + 'バナナ' + 'です。');
} else if (apple === false && banana === false && orange === true) { // みかんだけ選択
alert('好きな果物は' + 'みかん' + 'です。');
} else {
alert('好きな果物は一つだけ選択してください。');
}
});
</script>
ラジオボタンの情報取得
<label>好きな車を1つ選択:</label>
<label for="toyota">トヨタ</label>
<input type="radio" name="car" value="トヨタ" >
<label for="nissan">日産</label>
<input type="radio" name="car" value="日産">
<label for="honda">ホンダ</label>
<input type="radio" name="car" value="ホンダ">
<label for="honda">回答なし</label>
<input type="radio" name="car" value="回答なし" checked>
<div>
<button id="btn8">送信</button>
</div>
<script>
document.getElementById('btn8').addEventListener('click', function() {
const car = document.querySelector('input[name="car"]:checked').value; // ラジオボタンの情報取得
console.log('好きな車は' + car + 'です。');
});
</script>
パスワード自動生成
あらかじめパスワードの元となる数字を配列で準備する(大小文字数字)
パスワードの文字数を指定する(ユーザー指定orあらかじめ指定)
乱数を使用して配列の中から適当な1文字選択
パスワードの文字数繰り返す
画面に表示する
<label>パスワード</label>
<input type="text" id="password" name="password">
<div>
<button id="btn9">生成</button>
</div>
<script>
document.getElementById('btn9').addEventListener('click', function() {
let pass = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; // パスワードの元となる数字を配列で準備
let length =Number(window.prompt('何文字のパスワード作成しますか?')) // パスワードの文字数を指定する
let password = ''; // パスワードの初期化
for (let i = 0; i < length; i++) { // パスワードの文字数繰り返す
password += pass[Math.floor(Math.random() * pass.length)]; // 乱数を使用して配列の中から適当な1文字選択
}
document.getElementById('password').value = password; // 画面に表示する
});
</script>